
<script setup>

	import { ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import { getCourseList_api } from '@/common/apis/course';
  import {imageBaseUrl2} from "@/common/config";
	
	/** props */
	const props = defineProps([]);

	/** 词书列表 */
	const ciBooklist = ref([]);
	
	/** 课程索引 */
	const ciBookIndex = ref(-1);
	
	/** 词书 id */
	const ciBookId = ref(0);
	
	/** 请求状态 */
	const loading = ref(true);
	
	/** 获取词书列表 */
	async function getCiBooklist() {
		const result = await getCourseList_api();
		
		ciBooklist.value = result;
		loading.value = false;
	};
	
	/** 获取数据 */
	getCiBooklist();

	/** handle course info */
	const onSelectCourse = async (item, index) => {
		ciBookId.value = item.id;
		ciBookIndex.value = index;
	};
	
	/** 开始 */
	const begin = () => {
		if (!ciBookId.value) {
			uni.$fui.toast('请先选择词书~');
			return;
		};
		
		uni.navigateTo({ url: `/pages/course/aireading/word?id=${ciBookId.value}` });
	};
	
	/** 阅读记录 */
	const readingRecord = () => {
		uni.navigateTo({ url: '/pages/course/aireading/record' });
	};
	
	
</script>

<template>
	<view class="containerbox bgc-white">
		<uv-navbar leftText="选择词书" auto-back placeholder />
		
		<template v-if="!loading && ciBooklist.length">
			<scroll-view scrollY class="containerbox">
				<view class="boxs">
					<view class="items transition-bg" @click="onSelectCourse(item, index)" :class="{ actived: ciBookIndex === index }" v-for="item, index in ciBooklist" :key="item.id">{{ item.name }}</view>
				</view>
			</scroll-view>
			
			<view class="flex items-center justify-between bottombox">
				<!-- <view class="btn bgc-warning transition-opacity" hover-class="opacity-70" @click="readingRecord">阅读记录</view>
				<view class="w-30" /> -->
				<view class="btn bgc-primary2 transition-opacity" hover-class="opacity-70" @click="begin">确认选择</view>
			</view>
		</template>
		
		
		<dw_default :src="`${imageBaseUrl2}/svg/empty.svg`" v-if="!loading && !ciBooklist.length" class="m-auto" label="暂未开通相关课程~" />
	</view>
</template>


<style lang="scss" scoped>
.transition-bg{transition: background-color .3s}
.boxs{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:32rpx 32rpx}
.items{width:48%;background-color:#f6f6f6;font-size:28rpx;height:120rpx;border-radius:12rpx;display:flex;align-items:center;justify-content:center;margin-bottom:24rpx;padding: 0 10rpx;text-align: center}
.actived{background-color:#f69b2c;color:#fff}
.bottombox{padding:20rpx 32rpx 24rpx}
.btn{height:90rpx;border-radius:30rpx;flex:1;text-align:center;line-height:90rpx;color:#fff;font-size:32rpx}
.transition-opacity{transition: opacity .3s}
.opacity-70{opacity: .7}
</style>